<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情</title>
    <!-- 引入样式重置表 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入放大镜插件样式表 -->
    <link rel="stylesheet" href="lib/magnifier.css">
    <!-- 引入省市县三级联动插件样式 -->
    <script src="lib/area.js"></script>
    <link rel="stylesheet" href="lib/iconfont.css">
    <link rel="stylesheet" href="lib/style.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="css/product-details.css">


</head>

<body>
    <!-- 板块一 : 顶部导航 -->
    <div id="topnav" class="h40">
        <div class="container fz0">
            <div class="fl h40">
                <a href="#">康佳新闻</a>
                <span>|</span>
                <a href="#">加入康佳</a>
                <span>|</span>
                <a href="#">校园招聘</a>
                <span>|</span>
                <a href="#">康佳社区</a>
                <span>|</span>
                <a href="#">大宗采购</a>
                <span>|</span>
                <a href="#">积分商城</a>
                <span>|</span>
            </div>
            <div class="fr h40">
                <a href="member-login.html" target="_blank">登录</a>
                <span>|</span>
                <a href="member-register.html" target="_blank">注册</a>
                <a href="shopping-trolley.html" target="_blank" class="top_header_cart tacenter">
                    <img src="images/top-header-cart.png" alt="">购物车(<span>0</span>)
                </a>
            </div>
        </div>
    </div>

    <!-- 板块二 : 头部:logo+nav+search -->
    <header>
        <div id="header_menu" class="container">
            <a href="#" class="fl"><img src="images/logo.png" alt=""></a>
            <!-- 头部导航 -->
            <ul id="header_nav" class="fl cf">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">电视</a>
                    <ul id="sub_header_nav">
                        <li>
                            <a href="#"><img src="images/sub_header_nav_01.jpg" alt=""></a>
                            <h4>阿斐亚A3</h4>
                            <p>洞见未来 / 帧享视界</p>
                            <span>￥11999.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_02.jpg" alt=""></a>
                            <h4>98吋4K智能AI</h4>
                            <p>帝王黑金属机身</p>
                            <span>￥99999.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_03.jpg" alt=""></a>
                            <h4>43英寸全面屏</h4>
                            <p>AI智能语音</p>
                            <span>￥1599.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_04.jpg" alt=""></a>
                            <h4>55英寸4K超高清</h4>
                            <p>超薄全面屏</p>
                            <span>￥2599.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_05.jpg" alt=""></a>
                            <h4>65英寸声控物联</h4>
                            <p>大内存 / 全景AI</p>
                            <span>￥3499.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_06.jpg" alt=""></a>
                            <h4>75吋远场语音</h4>
                            <p>AI智能 / 纤薄机身</p>
                            <span>￥4199.00</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">冰箱</a>
                    <ul id="sub_header_nav">
                        <li>
                            <a href="#"><img src="images/sub_header_nav_11.jpg" alt=""></a>
                            <h4>186升双门家用...</h4>
                            <p>节能省电 / 冷冻冷藏</p>
                            <span>￥949.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_12.jpg" alt=""></a>
                            <h4>191升三开门电...</h4>
                            <p>三门三温 / 保鲜节能</p>
                            <span>￥989.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_13.jpg" alt=""></a>
                            <h4>409升十字多门...</h4>
                            <p>超薄嵌入式 / 精准温控</p>
                            <span>￥1999.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_14.jpg" alt=""></a>
                            <h4>446升嵌入式离...</h4>
                            <p>风冷无霜 / 养鲜净味</p>
                            <span>￥2399.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_15.jpg" alt=""></a>
                            <h4>448升嵌入式离...</h4>
                            <p>养鲜净味 / 抑菌风冷</p>
                            <span>￥2799.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_16.jpg" alt=""></a>
                            <h4>454升天际灰...</h4>
                            <p>静音节能 / 电脑控温</p>
                            <span>￥2299.00</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">洗衣机</a>
                    <ul id="sub_header_nav">
                        <li>
                            <a href="#"><img src="images/sub_header_nav_21.jpg" alt=""></a>
                            <h4>3公斤全自动波轮</h4>
                            <p>高温煮洗 / 纳米抑菌</p>
                            <span>￥899.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_22.jpg" alt=""></a>
                            <h4>6.2公斤波轮自洁</h4>
                            <p>净力超群 / 一键自洁</p>
                            <span>￥699.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_23.jpg" alt=""></a>
                            <h4>9公斤全自动波轮</h4>
                            <p>模糊控制 / 8种程序</p>
                            <span>￥899.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_24.jpg" alt=""></a>
                            <h4>9公斤变频滚筒</h4>
                            <p>变频节能 / 高温煮洗</p>
                            <span>￥1699.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_25.jpg" alt=""></a>
                            <h4>448升嵌入式离...</h4>
                            <p>养鲜净味 / 抑菌风冷</p>
                            <span>￥2799.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_26.jpg" alt=""></a>
                            <h4>9公斤变频滚筒</h4>
                            <p>高温煮洗 / 减震无...</p>
                            <span>￥1699.00</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">厨房电器</a>
                    <ul id="sub_header_nav">
                        <li>
                            <a href="#"><img src="images/sub_header_nav_61.jpg" alt=""></a>
                            <h4>无油烟空气炸锅</h4>
                            <p>可视窗口 / 触摸面板</p>
                            <span>￥449.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_62.jpg" alt=""></a>
                            <h4>包子鸭饭粒猫烤箱</h4>
                            <p>广域调控 / 精准定时</p>
                            <span>￥139.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_63.jpg" alt=""></a>
                            <h4>家用轻食华夫饼机</h4>
                            <p>即洗即用 / 控时控温</p>
                            <span>￥599.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_64.jpg" alt=""></a>
                            <h4>手提式电磁炉</h4>
                            <p>防水设计 / 多档火力</p>
                            <span>￥89.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_65.jpg" alt=""></a>
                            <h4>空气炸锅</h4>
                            <p>极简生活 / 轻享健康</p>
                            <span>￥249.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_66.jpg" alt=""></a>
                            <h4>多功能电火锅</h4>
                            <p>一机多用 / 多档调节</p>
                            <span>￥109.00</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">生活电器</a>
                    <ul id="sub_header_nav">
                        <li>
                            <a href="#"><img src="images/sub_header_nav_31.jpg" alt=""></a>
                            <h4>复古意式咖啡机</h4>
                            <p>三合一体/深压萃...</p>
                            <span>￥799.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_32.jpg" alt=""></a>
                            <h4>32升多功能烤箱</h4>
                            <p>烘焙用具 / 大容量</p>
                            <span>￥166.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_33.jpg" alt=""></a>
                            <h4>2L多功能电饭煲</h4>
                            <p>9大功能 / 感温探头</p>
                            <span>￥119.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_34.jpg" alt=""></a>
                            <h4>手持小风扇</h4>
                            <p>可吹可充 / 随身便携</p>
                            <span>￥89.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_35.jpg" alt=""></a>
                            <h4>轻音轻薄破壁机</h4>
                            <p>轻音轻薄 / 外观时尚</p>
                            <span>￥259.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_36.jpg" alt=""></a>
                            <h4>迷你家用电磁炉</h4>
                            <p>极简面板 / 智能触控</p>
                            <span>￥169.00</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">智能周边</a>
                    <ul id="sub_header_nav">
                        <li>
                            <a href="#"><img src="images/sub_header_nav_41.jpg" alt=""></a>
                            <h4>M1D无线麦克风</h4>
                            <p>双色双金 / 随心开唱</p>
                            <span>￥499.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_42.jpg" alt=""></a>
                            <h4>H4无线麦克风</h4>
                            <p>智能降噪 / 高保真</p>
                            <span>￥499.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_43.jpg" alt=""></a>
                            <h4>智能语音投影仪</h4>
                            <p>小巧轻便 / 画面清晰 </p>
                            <span>￥999.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_44.jpg" alt=""></a>
                            <h4>康佳便携投影L1</h4>
                            <p>语音操控 / 双音响</p>
                            <span>￥1100.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_45.jpg" alt=""></a>
                            <h4>M1无线麦克风</h4>
                            <p>奢华外观 / 歌房音效</p>
                            <span>￥269.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_46.jpg" alt=""></a>
                            <h4>AI智能投影仪</h4>
                            <p>高清投影 / 时尚简约</p>
                            <span>￥1199.00</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="product-list.html" target="_blank">K迷优品</a>
                    <ul id="sub_header_nav">
                        <li>
                            <a href="#"><img src="images/sub_header_nav_51.jpg" alt=""></a>
                            <h4>毛绒公仔</h4>
                            <p>牛来运转</p>
                            <span>￥116.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_52.jpg" alt=""></a>
                            <h4>帆布包</h4>
                            <p>众里寻TA</p>
                            <span>￥78.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_53.jpg" alt=""></a>
                            <h4>晴雨伞</h4>
                            <p>花花视界 / 半边出租</p>
                            <span>￥98.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_54.jpg" alt=""></a>
                            <h4>U型枕</h4>
                            <p>做个好梦</p>
                            <span>￥66.00</span>
                        </li>
                        <li>
                            <a href="#"><img src="images/sub_header_nav_55.jpg" alt=""></a>
                            <h4>笔记本</h4>
                            <p> 有本事</p>
                            <span>￥46.00</span>
                        </li>
                        <li>
                            <a href="product-details.html" target="_blank"><img src="images/sub_header_nav_56.jpg" alt=""></a>
                            <h4>盲盒 </h4>
                            <p>动物梦境系列</p>
                            <span>￥59.00</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">大宗采购</a>
                </li>
                <li>
                    <a href="#">服务</a>
                </li>
                <li class="header_nav_search"><span></span></li>
            </ul>
        </div>
    </header>

    <!-- 模块三 : 主体 :product_container(breadcrumb+product_page  )-->
    <main>
        <!-- 面包屑链接 -->
        <div class="product_details_container">
            <ol class="breadcrumb">
                <li>
                    <a href="#">K迷优品</a>&gt;
                </li>
                <li>
                    <a href="#">盲盒</a>&gt;
                </li>
                <li>
                    SUPER KIMI 动物梦境系列盲盒
                </li>
            </ol>
            <!-- 产品展示 -->
            <div id="product_display" class="cf">
                <!-- 放大镜 -->
                <div id="magnifier">
                    <div class="small-box">
                        <img src="images/small_1.jpg" alt="#">
                        <span class="hover" style="display: none; width: 303.75px; height: 303.75px; left: 146px; top: 0px;"></span>
                    </div>
                    <div class="thumbnail-box">
                        <a href="javascript:;" class="btn btn-prev"></a>
                        <a href="javascript:;" class="btn btn-next"></a>
                        <div class="list">
                            <ul class="wrapper">
                                <li class="item item-cur" data-src="images/small_1.jpg"><img src="images/thumbnail_1.jpg" alt="#"></li>
                                <li class="item" data-src="images/small_2.jpg"><img src="images/thumbnail_2.jpg" alt="#"></li>
                                <li class="item" data-src="images/small_3.jpg"><img src="images/thumbnail_3.jpg" alt="#"></li>
                                <li class="item" data-src="images/small_4.jpg"><img src="images/thumbnail_4.jpg" alt="#"></li>
                                <li class="item" data-src="images/small_5.jpg"><img src="images/thumbnail_5.jpg" alt="#"></li>
                            </ul>
                        </div>
                    </div>
                    <div class="big-box" style="display: none;">
                        <img src="images/big_1.jpg" alt="#">
                    </div>
                </div>
                <!-- 产品价格信息 -->
                <div id="product_about">
                    <h3>SUPER KIMI 动物梦境系列盲盒</h3>
                    <p>不支持无理由退换</p>
                    <p class="price">
                        <span>￥59.00</span>
                        <span>￥109.00</span>
                    </p>
                    <!-- 省市县三级联动 -->
                    <div id="bigOne" class="cf">
                        <p>配送地址 : </p>
                        <div id="box">
                            <span class="loadText text">请选择省/市/区</span>
                            <span class="textProvince text"></span>
                            <span class="textCity text"></span>
                            <span class="textArea text"></span>
                            <span class="iconfont icon-arrow-down arrow"></span>
                        </div>
                        <input type="text" value="" id="totalConfirm" readonly="">
                        <div id="content">
                            <div class="chose-tab">
                                <div id="province" class="chosePCA select">省份
                                    <ul class="province-list listing">
                                    </ul>
                                </div>
                                <div id="city" class="chosePCA">城市
                                    <ul class="city-list listing">
                                    </ul>
                                </div>
                                <div id="area" class="chosePCA">区县
                                    <ul class="area-list listing">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="distribution">
                        <h6>配送方式</h6>
                        <span class="way_active">自提</span>
                        <span>到付</span>
                    </div>
                    <div class="numbers cf">
                        <h6>数量</h6>
                        <p>
                            <button type="button" class="minus_num">-</button>
                            <input type="text" value="1">
                            <button type="button" class="add_num">+</button>
                        </p>
                    </div>
                    <div class="addbtn">
                        <a href="#" class="buy">立刻购买</a>
                        <a href="#" class="add">加入购物车</a>
                    </div>
                </div>
            </div>

            <!-- 产品页内容 -->
            <div id="product_page_content">
                <ul id="product_anchor" class="cf">
                    <li>详情介绍</li>
                    <li>规格参数</li>
                    <li>晒单评价</li>
                    <li>售后服务</li>
                    <li>咨询服务</li>
                </ul>
                <div id="product_content">
                    <div id="details">
                        <img src="images/details_01.jpg" alt="">
                        <img src="images/details_02.jpg" alt="">
                        <img src="images/details_03.jpg" alt="">
                        <img src="images/details_04.jpg" alt="">
                        <img src="images/details_05.jpg" alt="">
                    </div>
                    <div id="parameter">
                        <h4>规格参数</h4>
                        <div class="parameter_son">
                            <p>暂无</p>
                        </div>
                    </div>
                    <div id="evalute">
                        <h4>晒单评价</h4>
                        <div class="evalute_son">
                            <p>暂无</p>
                        </div>
                    </div>
                    <div id="aftersale">
                        <h4>售后服务</h4>
                        <div class="aftersale_son">
                            <p>商品返回地址将在服务单审核通过后进行消息通知，通知方式包括但不限于(短信、邮件、站内信)，您也可以在“售后处理列表”中查询申请状态。</p>
                        </div>
                    </div>
                    <div id="consult">
                        <h4>咨询服务</h4>
                        <form action="" class="consult_son">
                            <div class="consult_check">
                                全部咨询 :&emsp;&emsp;
                                <label><input type="radio" name="allconsult">商品咨询 </label>
                                <label><input type="radio" name="allconsult">配送咨询 </label>
                                <label><input type="radio" name="allconsult">售后咨询 </label>
                            </div>
                            <div><textarea placeholder="欢迎发表评价 , 并写上联系方式(可以是电话、email、qq等)...."></textarea> </div>
                            <button type="submit" id="consult_btn">提交咨询</button>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </main>
    <!-- 模块四 : 尾部 -->
    <footer class="container">
        <ul id="our_service" class="cf">
            <li>
                <img src="images/our_service_01.png" alt="">
                <div>
                    <h5>全场包邮</h5>
                    <p>全场商品免费送到家</p>
                </div>

            </li>
            <li>
                <img src="images/our_service_02.png" alt="">
                <div>
                    <h5>质量保证</h5>
                    <p>享受国家三包政策</p>
                </div>

            </li>
            <li>
                <img src="images/our_service_03.png" alt="">
                <div>
                    <h5>权益保障</h5>
                    <p>7天包退15天包换</p>
                </div>

            </li>
            <li>
                <img src="images/our_service_03.png" alt="">
                <div>
                    <h5>放心服务</h5>
                    <p>24小时内上门服务</p>
                </div>

            </li>
            <li>
                <img src="images/our_service_04.png" alt="">
                <div>
                    <h5>意外惊喜</h5>
                    <p>限时打折优惠不断</p>
                </div>
            </li>
        </ul>
        <div id="footer_nav" class="cf">
            <ul class="cf">
                <li>
                    <h6>帮助中心</h6>
                    <a href="#">购买指南</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">售后政策</a>
                    <a href="#">防伪查询</a>
                </li>
                <li>
                    <h6>新闻中心</h6>
                    <a href="#">集团新闻</a>
                    <a href="#">媒体报道</a>
                </li>
                <li>
                    <h6>投资者关系</h6>
                    <a href="#">公司概要</a>
                    <a href="#">高管团队</a>
                    <a href="#">最新公告</a>
                    <a href="#">公司治理</a>
                </li>
                <li>
                    <h6>集团成员网站</h6>
                    <a href="#">华侨城集团</a>
                    <a href="#">康佳全球服务中心</a>
                    <a href="#">康佳国际营销</a>
                    <a href="#">康佳移动互联科技</a>
                    <a href="#">康佳壹视界商业显示</a>
                    <a href="#">康佳智能电器</a>
                </li>
                <li>
                    <h6>关于我们</h6>
                    <a href="#">了解康佳</a>
                    <a href="#">加入康佳</a>
                    <a href="#">校园招聘</a>
                    <a href="#">联系我们</a>
                </li>
                <li>
                    <h6>关注我们</h6>
                    <a href="#">官方微博</a>
                    <a href="#">官方微信</a>
                    <a href="#">官方社区</a>
                    <a href="#" class="aboutus">K迷俱乐部
                        <img src="images/about_us_01.jpg" alt="">
                    </a>
                    <a href="#" class="aboutus">康佳微商城
                        <img src="images/about_us_02.jpg" alt="">
                    </a>
                    <a href="#" class="aboutus">康佳服务
                        <img src="images/about_us_03.jpg" alt="">
                    </a>
                </li>
            </ul>
            <div class="service_hotline">
                <h6>24小时全国服务热线</h6>
                <p>400-880-0016</p>
                <a href="#">
                    <span></span> 购买咨询
                </a>
                &nbsp;
                <a href="#">
                    <span></span> 售后服务
                </a>
            </div>
        </div>
    </footer>


    <!-- 模块五 : 底部导航 -->
    <div id="bottom_nav">
        <div class="container">
            <img src="images/konka.png" alt=""> Copyright © 1980-2021 康佳集团股份有限公司 版权所有 |
            <a href="#">联系我们</a> |
            <a href="#">法律声明</a> |
            <a href="#">隐私保护</a> |
            <a href="#">快递查询</a> |
            <a href="#">腾讯视频TV端</a> |
            <a href="#">粤ICP备 05059413号</a>
        </div>
    </div>


    <!-- 企业资质 -->
    <div id="qualification">
        <div class="container">
            <img src="images/qualification_01.png" alt="">
            <img src="images/qualification_02.png" alt="">
            <img src="images/qualification_03.png" alt="">
        </div>
    </div>

    <!-- 右侧链接：购买咨询+售后服务+购物车+回到顶部 -->
    <div id="right_linking">
        <a href="#" id="consult"></a>
        <a href="#" id="after_sale"></a>
        <a href="#" id="cart"></a>
        <a href="#" id="returnTop"></a>
    </div>








    <!-- 引入jq库 -->
    <script src="lib/jquery-1.11.3/jquery.js"></script>
    <!-- 引入放大镜插件js -->
    <script src="lib/magnifier.js"></script>
    <!-- 引入省市县三级联动插件 -->
    <script src="lib/script.js"></script>
    <!-- 引入当前页面js -->
    <script src="js/product-details.js"></script>

</body>

</html>